<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/css/ico.css" />
<link type="text/css" rel="stylesheet" href="/css/tooltip.css" />
<link type="text/css" rel="stylesheet" href="/css/util.css" />
<link type="text/css" rel="stylesheet" href="/css/toPage.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<script type="text/javascript" src="/js/tooltip.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/toPage.js"></script>
<title>Z盘</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

#a {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.text {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.name {
	width: 50%;
}

#img {
	width: 64px;
	height: 64px;
}

#b {
	display: none;
	height: 100%;
	width: 100%;
	padding-top: 1em;
	height: 100%;
}

#img2 {
	width: 32px;
	height: 32px;
}

#table td:nth-child(1) {
	width: 2em;
}

#table td:nth-child(3) {
	opacity: 0;
	width: 10em;
}

#table tr:hover td:nth-child(3) {
	opacity: 1;
}

#table td:nth-child(4) {
	width: 6em;
}

#table td:nth-child(5) {
	width: 4em;
}

#table td:nth-child(6) {
	width: 11em;
}
</style>
<script>
	$(function() {
		$("#name").focus();
		$(document).keydown(function(event) {
			if (event.keyCode == 13) {
				search();
			}
		});
	});
	function search() {
		var name;
		if ($("#b").is(":hidden")) {
			name = $("#name").val();
			if (name.length == 0) {
				showTips("name", "请输入搜索内容");
				return false;
			}
			$("#a").hide();
			$("#b").show();
			$("#name2").val($("#name").val());
		} else {
			name = $("#name2").val();
			if (name.length == 0) {
				showTips("name2", "请输入搜索内容");
				return false;
			}
		}
		searchResult(name)
	}
	function initPage(current_page) {
		var name = $("#name2").val();
		if (name != false) {
			searchResult(name, current_page);
		}
	}
	function searchResult(name, current_page = 1) {
		$("#fileList").empty();
		tips();
		$.ajax({
			url : "/file/search?pages=" + current_page + "&name=" + name,
			type : "post",
			//contentType : "application/x-www-form-urlencoded;charset=UTF-8",
			contentType : "application/json;charset=UTF-8",
			dataType : "json",
			success : function(data) {
				if (data.code == 0) {
					var total_page = data.data.pages;
					toPage(initPage, total_page, current_page);
					var list = data.data.list;
					if (list.length == 0) {
						showTips(null, "文件为空！", "success");
						return false;
					}
					var tr,
						id,
						name,
						suffix,
						timestamp,
						size,
						status,
						uuid,
						date,
						isfolder,
						islimit,
						pwd,
						previewFile,
						shareFile,
						clickFile,
						clickDownload;
					for (var i in list) {
						id = list[i].id;
						name = list[i].name;
						isfolder = list[i].isfolder;
						suffix = (isfolder == "0" ? getFileSuffix(name) : "folder");
						isfolder = list[i].isfolder,
						islimit = list[i].islimit,
						pwd = list[i].pwd;
						timestamp = list[i].timestamp;
						size = (isfolder == "0" ? bytes2Size(list[i].length) : "");
						status = (pwd == 1 ? (islimit == 1 ? "密限" : "密码") : (islimit == 1 ? "限制" : ""));
						uuid = list[i].uuid;
						date = time2Date(list[i].time);
						clickFile = "/jump?jump=/file/" + (isfolder == "0" ? "" : "folder/") + "file/info/" + timestamp;
						shareFile = "<button onClick='shareFile()' class='btn btn-xs btn-info'>分享</button>";
						previewFile = (uuid.length == 0 || isfolder == "1") ? "" : "<button onClick='previewFile()' class='btn btn-xs btn-warning'>预览</button>";
						downloadFile = (uuid.length == 0) ? ""
							: (isfolder == 1) ? ("<button onClick='downloadFolder()' class='btn btn-xs btn-success'>下载</button>")
								: ("<a href='/file/download/" + uuid + "' target='_blank'><button class='btn btn-xs btn-success'>下载</button></a>");
						tr = "<tr id='" + id + "' name='" + name + "' isfolder='" + isfolder + "' islimit='" + islimit + "' pwd='" + pwd + "' timestamp='" + timestamp + "' uuid='" + uuid + "'>";
						tr += "<td><input type='checkbox' name='idcb' value='" + uuid + "'></td>";
						tr += "<td><a href='" + clickFile + "' target='_blank'><img class='ico ico-" + suffix + "'>" + name + "</a></td>";
						tr += "<td>" + shareFile + "&ensp;" + previewFile + "&ensp;" + downloadFile + "</td>";
						tr += "<td>" + size + "</td>";
						tr += "<td>" + status + "</td>";
						tr += "<td>" + date + "</td></tr>";
						$("#fileList").append(tr);
					}
				} else { //其他错误
					showTips(null, data.msg);
					return false;
				}
			}
		});
	}
</script>
</head>
<body>
	<div id="a">
		<img id="img" src="/img/logo.png" alt="Z盘" />
		<div class="text">
			<input id="name" type="text" class="form-control name" placeholder="请输入搜索内容">
			<button class="btn btn-default" onclick="search()">搜索</button>
		</div>
	</div>
	<div id="b">
		<div class="text">
			<img id="img2" src="/img/logo.png" alt="Z盘" />
			<input id="name2" type="text" class="form-control name" placeholder="请输入搜索内容">
			<button class="btn btn-default" onclick="search()">搜索</button>
		</div>
		<div id="table">
			<table class="table table-hover table-striped table-condensed">
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="selectAll">
						</th>
						<th>文件名</th>
						<th></th>
						<th>文件大小</th>
						<th>状态</th>
						<th>上传时间</th>
					</tr>
				</thead>
				<tbody id="fileList"></tbody>
			</table>
			<div id="toPage"></div>
		</div>
	</div>
</body>
</html>
